<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css"
        media="screen"/>
  <script src="js/jquery-3.3.1.js"></script>
  <link rel="StyleSheet" href="../css/searchProduct.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen"/>
  <link rel="StyleSheet" href="../css/pop.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/IncludeTop">
</div>
<div id="Content">
  <div id="BackLink">
    <a href="/catalog/view">Return to Main Menu</a>
  </div>
  <div id="Catalog">

    <table>
      <tr>
        &nbsp<th align="center" colspan="2" th:text="'Order #'+${session.order.orderId}">
        <th:formatDate th:text="${session.order.orderDate}" pattern="yyyy/MM/dd hh:mm:ss" />
      </th>
      </tr>
      <tr>
        <th colspan="2">Payment Details</th>
      </tr>
      <tr>
        <td>Card Type:</td>
        <td th:text="${session.order.cardType }" ></td>
      </tr>
      <tr>
        <td>Card Number:</td>
        <td th:text="${session.order.creditCard }" > * Fake
          number!</td>
      </tr>
      <tr>
        <td>Expiry Date (MM/YYYY):</td>
        <td th:text="${session.order.expiryDate }" ></td>
      </tr>
      <tr>
        <th colspan="2">Billing Address</th>
      </tr>
      <tr>
        <td>First name:</td>
        <td th:text="${session.order.billToFirstName }" ></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td th:text="${session.order.billToLastName }" ></td>
      </tr>
      <tr>
        <td>Address 1:</td>
        <td th:text="${session.order.billAddress1 }" ></td>
      </tr>
      <tr>
        <td>Address 2:</td>
        <td th:text="${session.order.billAddress2 }" ></td>
      </tr>
      <tr>
        <td>City:</td>
        <td th:text="${session.order.billCity }" ></td>
      </tr>
      <tr>
        <td>State:</td>
        <td th:text="${session.order.billState }" ></td>
      </tr>
      <tr>
        <td>Zip:</td>
        <td th:text="${session.order.billZip }" ></td>
      </tr>
      <tr>
        <td>Country:</td>
        <td th:text="${session.order.billCountry }" ></td>
      </tr>
      <tr>
        <th colspan="2">Shipping Address</th>
      </tr>
      <tr>
        <td>First name:</td>
        <td th:text="${session.order.shipToFirstName }" ></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td th:text="${session.order.shipToLastName }" ></td>
      </tr>
      <tr>
        <td>Address 1:</td>
        <td th:text="${session.order.shipAddress1 }" ></td>
      </tr>
      <tr>
        <td>Address 2:</td>
        <td th:text="${session.order.shipAddress2 }" ></td>
      </tr>
      <tr>
        <td>City:</td>
        <td th:text="${session.order.shipCity }" ></td>
      </tr>
      <tr>
        <td>State:</td>
        <td th:text="${session.order.shipState }" ></td>
      </tr>
      <tr>
        <td>Zip:</td>
        <td th:text="${session.order.shipZip }" ></td>
      </tr>
      <tr>
        <td>Country:</td>
        <td th:text="${session.order.shipCountry }" ></td>
      </tr>
      <tr>
        <td>Courier:</td>
        <td th:text="${session.order.courier }" ></td>
      </tr>
      <tr>
        <td colspan="2">Status: <th:out th:text="${session.order.status }" ></th:out></td>
      </tr>
      <tr>
        <td colspan="2">
          <table>
            <tr>
              <th>Item ID</th>
              <th>Description</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>Total Cost</th>
            </tr>

            <tr th:each="lineItem:${session.order.lineItems}">
              <td>
                <a th:href="'viewItem?itemId'+${lineItem.item.itemId}" th:text="${lineItem.item.itemId}"></a>
              </td>
              <td th:if="${lineItem.item != null}" th:text=
                      "${lineItem.item.attribute1!=null?lineItem.item.attribute1:''}+
                                    ' '+${lineItem.item.attribute2!=null?lineItem.item.attribute2:''}+
                                    ' '+${lineItem.item.attribute3!=null?lineItem.item.attribute3:''}+
                                    ' '+${lineItem.item.attribute4!=null?lineItem.item.attribute4:''}+
                                    ' '+${lineItem.item.attribute5!=null?lineItem.item.attribute5:''}+
                                    ' '+${lineItem.item.product.name}">


                </th:if> <th:if th:test="${lineItem.item == null}">
                <i>{description unavailable}</i>
              </th:if></td>

              <td th:text="${lineItem.quantity}"></td>
              <td><th:formatNumber th:text="${lineItem.unitPrice}"
                                   pattern="$#,##0.00" /></td>
              <td><th:formatNumber th:text="${lineItem.total}"
                                   pattern="$#,##0.00" /></td>
            </tr>
            </th:each>
            <tr>
              <th colspan="5">Total: <th:formatNumber
                      th:text="${session.order.totalPrice}" pattern="$#,##0.00" /></th>
            </tr>
          </table>
        </td>
      </tr>

    </table>

    <form action="/ali/pay" method="post">
    <table>
      <tr><td>订单号：</td><td><input type="text" name="outTradeNo" id="field" readonly></td></tr>
      <tr><td>商家：</td><td><input type="text" name="subject" readonly value="铁铁平价超市"></td></tr>
      <tr><td>付款金额：</td><td><input type="text" name="totalAmount" readonly th:value="${session.order.totalPrice}"  /></td></tr>
<!--      <tr><td>付款金额：</td><td><input readonly th:formatNumber th:text="${session.order.totalPrice}" pattern="$#,##0.00" /></td></tr>-->
      <tr><td>备注：</td><td><input type="text" name="body" value="我爱铁子哥！！"></td></tr>
    </table>
    <input type="submit" value="下单">
    </form>
    <script>
      $(document).ready(function(){
        document.getElementById("field").value=parseInt(Math.random()*10000000);
      })
    </script>
  </div>
</div>

<div th:replace="common/IncludeBottom">
</div>
</body>
</html>